<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <link rel="manifest" href="../manifest.json">
  <link rel="icon" href="../static/img/favicons/favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
  <title>DEMO</title>
  <meta name="description" content="Generate some commonly used Bootstrap components through JavaScript">
  <meta name="keywords" content="Bootstrap,Bootstrap5,Modal,Offcanvas,Toast,Tooltip,Popover">
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?097448a07faa6124412179f6c9bfc688'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  </script>
</head>
<body>
<div class="container">
  <div class="position-relative min-vh-100">
    <div class="position-absolute top-0 start-50 translate-middle-x">
      <svg xmlns="http://www.w3.org/2000/svg" width="300" height="266" class="img-fluid mb-3 mb-md-0" role="img" viewBox="0 0 900 800">
        <title>Bootstrap</title>
        <defs>
          <filter id="filter0_d" width="704" height="623.928" x="98" y="96" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
            <feOffset dy="8"></feOffset>
            <feGaussianBlur stdDeviation="16"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.423529 0 0 0 0 0.0666667 0 0 0 0 0.956863 0 0 0 0.25 0"></feColorMatrix>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
          </filter>
          <filter id="filter1_d" width="704" height="623.928" x="98" y="96" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
            <feOffset dy="8"></feOffset>
            <feGaussianBlur stdDeviation="16"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0.423529 0 0 0 0 0.0666667 0 0 0 0 0.956863 0 0 0 0.25 0"></feColorMatrix>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
          </filter>
          <filter id="filter2_d" width="260.144" height="302.767" x="327.804" y="252.368" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
            <feOffset dy="4"></feOffset><feGaussianBlur stdDeviation="8"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"></feColorMatrix>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
          </filter>
          <filter id="filter3_d" width="261.369" height="303.992" x="327.192" y="251.755" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
            <feOffset dy="4"></feOffset>
            <feGaussianBlur stdDeviation="8"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"></feColorMatrix>
            <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
            <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
          </filter>
          <linearGradient id="paint1_linear" x1="211.405" x2="769.059" y1="251.5" y2="494.972" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="var(--bs-orange)"></stop>
            <stop offset=".995" stop-color="#f76036"></stop>
          </linearGradient>
          <linearGradient id="paint2_linear" x1="363.642" x2="515.493" y1="319.901" y2="465.49" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#fff"></stop>
            <stop offset="1" stop-color="#f1e5fc"></stop>
          </linearGradient>
          <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientTransform="rotate(90 25 425) scale(400)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#ced4da"></stop>
            <stop offset="1" stop-color="#ced4da" stop-opacity="0"></stop>
          </radialGradient>
          <clipPath id="clip0">
            <path fill="#fff" d="M0 0h900v800H0z"></path>
          </clipPath>
        </defs>
        <g clip-path="url(#clip0)">
          <circle cx="450" cy="400" r="400" fill="url(#paint0_radial)"></circle>
          <path fill="#ffc107" fill-rule="evenodd" d="M138 539h98v46h-98v-46zm100-2v50H136v-50h102z" clip-rule="evenodd"></path>
          <path fill="#ffc107" fill-rule="evenodd" d="M238 539h89a7 7 0 017 7v32a7 7 0 01-7 7h-89v-46zm89-2a9 9 0 019 9v32a9 9 0 01-9 9h-91v-50h91zm-281.816 0c-5.072 0-9.184 4.029-9.184 9v32c0 4.971 4.112 9 9.184 9H136v-50H45.184zM60 558a4 4 0 000 8h52a4 4 0 000-8H60z" clip-rule="evenodd"></path>
          <path fill="#007bff" fill-rule="evenodd" d="M115 400a8 8 0 100-16 8 8 0 000 16zm0 2c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm-30 0c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm0-5a5 5 0 100-10 5 5 0 000 10zm53-15a4 4 0 00-4 4v12a4 4 0 004 4h12a4 4 0 004-4v-12a4 4 0 00-4-4h-12zm11.676 5.324a1.103 1.103 0 00-1.591.033l-5.115 6.517-3.084-3.084a1.105 1.105 0 00-1.562 1.563l3.898 3.898a1.103 1.103 0 001.589-.03l5.881-7.351a1.103 1.103 0 00-.016-1.546zM180 384h-12a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-12a2 2 0 00-2-2zm-12-2a4 4 0 00-4 4v12a4 4 0 004 4h12a4 4 0 004-4v-12a4 4 0 00-4-4h-12z" clip-rule="evenodd"></path>
          <path fill="#adb5bd" fill-rule="evenodd" d="M473 554c0-5.523 4.477-10 10-10h260c5.523 0 10 4.477 10 10v130.125c0 5.523-4.477 10-10 10H626.646a7.994 7.994 0 00-5.64 2.327l-6.596 6.556c-.78.776-2.04.776-2.82 0l-6.596-6.556a7.994 7.994 0 00-5.64-2.327H483c-5.523 0-10-4.477-10-10V554zm10-8a8 8 0 00-8 8v29h276v-29a8 8 0 00-8-8H483zm268 39H475v99.125a8 8 0 008 8h116.354a10 10 0 017.05 2.908L613 701.59l6.596-6.557a10 10 0 017.05-2.908H743a8 8 0 008-8V585z" clip-rule="evenodd"></path>
          <path fill="#007bff" fill-rule="evenodd" d="M503 74c0-5.523 4.477-10 10-10h260c5.523 0 10 4.477 10 10v160c0 5.523-4.477 10-10 10H513c-5.523 0-10-4.477-10-10V74zm10-8a8 8 0 00-8 8v29h276V74a8 8 0 00-8-8H513zm268 39H505v97h276v-97zm0 99H644v38h129a8 8 0 008-8v-30zm-139 38v-38H505v30a8 8 0 008 8h129z" clip-rule="evenodd"></path>
          <path fill="#007bff" fill-rule="evenodd" d="M756.293 79.293a1 1 0 011.414 0L762 83.586l4.293-4.293a1 1 0 111.414 1.414L763.414 85l4.293 4.293a1 1 0 11-1.414 1.414L762 86.414l-4.293 4.293a1 1 0 11-1.414-1.414L760.586 85l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          <path fill="#007bff" d="M673 223a4 4 0 014-4h72a4 4 0 010 8h-72a4 4 0 01-4-4zm-140 0a4 4 0 014-4h72a4 4 0 010 8h-72a4 4 0 01-4-4z"></path>
          <path fill="#e83e8c" fill-rule="evenodd" d="M757 432H475a7 7 0 00-7 7v32a7 7 0 007 7h282a7 7 0 007-7v-32a7 7 0 00-7-7zm-282-2a9 9 0 00-9 9v32a9 9 0 009 9h282a9 9 0 009-9v-32a9 9 0 00-9-9H475zm310 0a9 9 0 00-9 9v32a9 9 0 009 9h72a9 9 0 009-9v-32a9 9 0 00-9-9h-72zm10 21a4 4 0 000 8h52a4 4 0 000-8h-52z" clip-rule="evenodd"></path>
          <path fill="#dc3545" fill-rule="evenodd" d="M825 336H541a6 6 0 100 12h284a6 6 0 100-12zm-284-2a8 8 0 000 16h284a8 8 0 000-16H541z" clip-rule="evenodd"></path>
          <path fill="#dc3545" d="M533 342a8 8 0 018-8h242v16H541a8 8 0 01-8-8z"></path>
          <path fill="#adb5bd" fill-rule="evenodd" d="M57 271a6 6 0 00-6 6v28a6 6 0 006 6h81.515a6 6 0 014.242 1.757l7.536 7.536a1 1 0 001.414 0l7.536-7.536a6 6 0 014.242-1.757H245a6 6 0 006-6v-28a6 6 0 00-6-6H57zm33 16a4 4 0 000 8h122a4 4 0 000-8H90z" clip-rule="evenodd"></path>
          <path fill="#20c997" fill-rule="evenodd" d="M253 157c0-5.523-4.477-10-10-10H141c-5.523 0-10 4.477-10 10v39a1 1 0 002 0v-39a8 8 0 018-8h102a8 8 0 018 8v39a1 1 0 001 1h198a1 1 0 000-2H253v-38z" clip-rule="evenodd"></path>
          <path fill="#20c997" d="M151 174a4 4 0 014-4h72a4 4 0 010 8h-72a4 4 0 01-4-4z"></path>
          <path fill="url(#paint1_linear)" fill-rule="evenodd" d="M202.606 300.603c-8.615-28.187 6.531-60.366 36.506-68.398l309.643-82.969c29.975-8.031 59.181 12.264 65.814 40.982 6.371 27.588 17.095 62.662 33.744 89.141 16.7 26.562 36.732 40.854 62.058 36.589l7.125 26.591c-24.065 8.969-34.268 31.362-35.45 62.716-1.178 31.256 7.072 66.993 15.348 94.07 8.615 28.187-6.531 60.366-36.506 68.398l-309.643 82.969c-29.975 8.031-59.181-12.264-65.814-40.982-6.371-27.587-17.095-62.661-33.744-89.141-16.7-26.562-36.732-40.854-62.058-36.588l-7.125-26.592c24.065-8.969 34.268-31.362 35.45-62.715 1.178-31.257-7.072-66.994-15.348-94.071z" clip-rule="evenodd" filter="url(#filter0_d)"></path>
          <path fill-opacity=".15" fill-rule="evenodd" d="M239.37 233.171c-29.369 7.87-44.275 39.435-35.808 67.14 8.286 27.109 16.576 62.974 15.391 94.4-1.175 31.158-11.239 53.906-35.25 63.291l6.659 24.848c25.486-3.877 45.576 10.791 62.172 37.187 16.739 26.623 27.493 61.828 33.872 89.448 6.519 28.227 35.21 48.11 64.58 40.241l309.644-82.969c29.369-7.87 44.275-39.435 35.807-67.139-8.285-27.11-16.575-62.975-15.39-94.401 1.175-31.158 11.239-53.906 35.25-63.29l-6.659-24.849c-25.486 3.877-45.576-10.791-62.172-37.186-16.739-26.624-27.493-61.829-33.872-89.449-6.519-28.227-35.21-48.11-64.58-40.241L239.37 233.171zm471.001 82.777c-25.326 4.265-45.358-10.027-62.058-36.589-16.649-26.479-27.373-61.553-33.744-89.141-6.633-28.718-35.839-49.013-65.814-40.982l-309.643 82.969c-29.975 8.032-45.121 40.211-36.506 68.398 8.276 27.077 16.526 62.814 15.348 94.071-1.182 31.353-11.385 53.746-35.45 62.715l7.125 26.592c25.326-4.266 45.358 10.026 62.058 36.588 16.649 26.479 27.373 61.554 33.744 89.141 6.633 28.718 35.839 49.013 65.814 40.982l309.643-82.969c29.975-8.032 45.121-40.211 36.506-68.398-8.276-27.077-16.526-62.814-15.348-94.07 1.182-31.354 11.385-53.747 35.45-62.716l-7.125-26.591z" clip-rule="evenodd" filter="url(#filter1_d)"></path>
          <path fill="url(#paint2_linear)" d="M494.943 510.853c48.05-12.875 70.547-44.737 59.895-84.492-8.052-30.051-34.542-46.271-66.141-41.494l-.336-1.252c21.532-9.796 33.472-35.977 27.056-59.924-9.143-34.12-41.392-49.3-81.46-38.564l-88.221 23.639a2 2 0 00-1.414 2.449l59.481 221.988a2 2 0 002.45 1.414l88.69-23.764zM386.538 328.532l46.642-12.498c25.355-6.794 42.858.93 48.478 21.903 5.997 22.382-7.395 39.39-37.759 47.526l-39.286 10.527-18.075-67.458zm45.167 168.567l-19.92-74.345 46.328-12.414c33.181-8.891 53.753-.983 60.296 23.434 6.542 24.416-6.724 41.894-38.34 50.366l-48.364 12.959z" filter="url(#filter2_d)"></path>
          <path fill="#fff" fill-rule="evenodd" d="M343.839 311.345a2.5 2.5 0 011.767-3.062l88.221-23.639c20.12-5.391 38.326-4.288 52.67 2.492 14.355 6.784 24.796 19.232 29.403 36.426 6.438 24.026-5.424 50.293-26.947 60.331l.111.414c31.637-4.594 58.171 11.749 66.257 41.925 5.36 20.004 2.385 38.065-8.009 52.744-10.386 14.667-28.139 25.902-52.24 32.36l-88.69 23.764a2.5 2.5 0 01-3.062-1.768l-59.481-221.987zm2.026-2.096a1.5 1.5 0 00-1.06 1.837l59.481 221.988a1.5 1.5 0 001.837 1.06l88.691-23.764c23.949-6.418 41.47-17.551 51.682-31.972 10.203-14.409 13.151-32.157 7.859-51.908-7.981-29.786-34.216-45.87-65.584-41.129l-.442.067-.561-2.093.386-.175c21.297-9.689 33.137-35.616 26.78-59.34-4.536-16.926-14.791-29.128-28.864-35.78-14.083-6.656-32.036-7.775-51.984-2.43l-88.221 23.639zm40.061 18.929l47.124-12.627c12.743-3.414 23.585-3.201 31.974.566 8.408 3.775 14.275 11.085 17.117 21.691 3.034 11.325 1.167 21.34-5.336 29.545-6.485 8.183-17.539 14.51-32.777 18.593l-39.768 10.656-18.334-68.424zm1.224.707l17.817 66.492 38.802-10.397c15.126-4.053 25.951-10.297 32.253-18.248 6.284-7.929 8.115-17.61 5.153-28.666-2.778-10.367-8.473-17.405-16.56-21.037-8.106-3.64-18.693-3.891-31.306-.512l-46.159 12.368zm24.022 93.515l46.812-12.543c16.638-4.458 30.197-4.729 40.447-.757 10.282 3.985 17.155 12.209 20.461 24.544 3.303 12.329 1.615 22.969-4.946 31.595-6.545 8.603-17.885 15.133-33.748 19.384l-48.846 13.088-20.18-75.311zm1.225.707l19.662 73.379 47.88-12.829c15.753-4.221 26.854-10.666 33.211-19.024 6.341-8.335 8.014-18.643 4.776-30.73-3.238-12.081-9.921-20.019-19.856-23.87-9.967-3.863-23.284-3.643-39.827.79l-45.846 12.284z" clip-rule="evenodd" filter="url(#filter3_d)"></path>
        </g>
      </svg>
    </div>
    <div class="position-absolute top-50 start-50 translate-middle">
      <div class="table-responsive">
        <table class="table align-middle table-primary table-striped table-hover border overflow-hidden rounded">
          <thead>
          <tr>
            <th scope="col">functions</th>
            <th scope="col">umd</th>
            <th scope="col">esm</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th scope="row" style="color: #7952b3;">bModal</th>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./umd/modal.html" target="_blank" title="dynamic bModal demo">Link</a></td>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./esm/modal.html" target="_blank" title="dynamic bModal demo">Link</a></td>
          </tr>
          <tr>
            <th scope="row" style="color: #7952b3;">bOffcanvas</th>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./umd/offcanvas.html" target="_blank" title="dynamic bOffcanvas demo">Link</a></td>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./esm/offcanvas.html" target="_blank" title="dynamic bOffcanvas demo">Link</a></td>
          </tr>
          <tr>
            <th scope="row" style="color: #7952b3;">bToast</th>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./umd/toast.html" target="_blank" title="dynamic bToast demo">Link</a></td>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./esm/toast.html" target="_blank" title="dynamic bToast demo">Link</a></td>
          </tr>
          <tr>
            <th scope="row" style="color: #7952b3;">bTooltip</th>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./umd/tooltip.html" target="_blank" title="dynamic bTooltip demo">Link</a></td>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./esm/tooltip.html" target="_blank" title="dynamic bTooltip demo">Link</a></td>
          </tr>
          <tr>
            <th scope="row" style="color: #7952b3;">bPopover</th>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./umd/popover.html" target="_blank" title="dynamic bPopover demo">Link</a></td>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./esm/popover.html" target="_blank" title="dynamic bPopover demo">Link</a></td>
          </tr>
          <tr>
            <th scope="row" style="color: #7952b3;">BUNDLE</th>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./umd/0.html" target="_blank" title="dynamic bComponents demo">Link</a></td>
            <td><a class="btn btn-link text-decoration-none text-reset fw-bolder" href="./esm/0.html" target="_blank" title="dynamic bComponents demo">Link</a></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>